<template>
	<div>
		<el-form ref="form" :model="form" label-width="85px" style="display:flex;flex-wrap:wrap">
			<el-form-item label="数字识别码" prop="batchNo">
				<el-input placeholder="数字识别码" v-model="form.batchNo" style="width:250px" clearable size="mini" />
			</el-form-item>

			<el-form-item label="数量" prop="amount">
				<el-input placeholder="数量" v-model="form.amount" style="width:140px" clearable size="mini" />
			</el-form-item>

			<el-form-item label="危废代码" prop="wasteCode">
				<el-input placeholder="危废代码" v-model="form.wasteCode" style="width:140px" clearable size="mini" />
			</el-form-item>
			<el-form-item label="危废名称" prop="wasteName">
				<el-input placeholder="危废名称" v-model="form.wasteName" style="width:140px" clearable size="mini" />
			</el-form-item>

			<el-form-item label="仓库" prop="storageId">
				<el-select style="width: 140px" v-model="form.storageId" placeholder="仓库" filterable clearable
					size="mini">
					<el-option :label="item.storageName" :value="item.id"
						v-for="(item, index) in storageList"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="开始时间" prop="startTime">
				<el-date-picker class="input-width" v-model="form.startTime" type="date" style="width:160px"
					value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable size="small">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间" prop="endTime">
				<el-date-picker class="input-width" v-model="form.endTime" type="date" style="width:160px"
					value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable size="small">
				</el-date-picker>
			</el-form-item>

			<el-button type="primary" @click="search"
				style="line-height:16px;margin-left:20px;height: 32px;margin-top: 2px;" size="small">查询</el-button>
		</el-form>

		<div style="width: 100%;height:450px">
			<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak max-height="420"
				@select="handleSelectionChange" @select-all="selectAll" ref="multipleTable" v-loading="loading">
				<!-- <el-table-column align="center" type="selection" width="45" fixed>
				</el-table-column> -->
				<el-table-column prop="batchNo" label="数字识别码" fixed width="300">
				</el-table-column>
				<el-table-column prop="wasteCode" label="危废代码">
				</el-table-column>
				<el-table-column prop="wasteName" label="危废名称">
				</el-table-column>
				<el-table-column prop="amount" label="现数量">
				</el-table-column>
				<el-table-column prop="unitValue" label="单位">
				</el-table-column>
				<el-table-column prop="storageName" label="所属仓库">
				</el-table-column>
				<el-table-column prop="inStorageTime" label="入库时间">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="saveDet(scope.row)" type="text" size="small">撤回</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<div class="bgfff pad1020 mt10">
				<el-pagination background layout="prev, pager, next" :total="tableData.total"
					@current-change="changePage" />
			</div>
			
		</div>
	</div>
</template>

<script>
	let that
	export default {
		props: ['detail'],
		data() {
			return {
				dialogVisible: false,
				form: {
					amount: '',
					batchNo: '', // 数字识别码
					wasteCode: '', // 危废代码
					wasteName: '', // 危废名称
					storageId: '', // 所属仓库
					startTime: '', // 开始时间
					endTime: '', // 结束时间
				},
				rules: [],
				storageList: [],
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 10,
					list: []
				},
				selectOrders: [],
				loading: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.ajax({
				url: '/hw/storageBase/pageStorageBase?ticketId=' + that.$store.state.token +
					'&pageIndex=1&pageSize=9999',
				data: JSON.stringify({}),
				contentType: 'application/json',
				success: function(result) {
					if (result.status == 1) {
						that.storageList = result.data.list
					}
				}
			})
			
			that.pageTag()
		},

		methods: {
			//全部加入
			allOut() {
				this.$confirm('是否将当前所有批次加入到出库单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '加入中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					that.form.mainId = that.detail.header.id
					that.ajax({
						url: '/hw/inventory/saveAllDet?ticketId=' + that.$store.state.token,
						data: JSON.stringify(that.form),
						contentType: 'application/json',
						dataType: 'json',
						method: 'POST',
						success: function(result) {
							loading.close();
							that.selectOrders = []
							that.$emit("success", result.data)
							that.$message.success("加入成功")
							that.pageTag()
						},
					})
				})
			},

			//批量出库
			batchOut() {
				if (that.selectOrders.length == 0) return that.$message.error("请选择出库批次")
				let list = []
				for (let item of that.selectOrders) {
					list.push({
						tagId: item.tagId,
						amount: item.realAmount
					})
				}
				this.$confirm('是否将勾选的批次加入到出库单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '加入中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					that.ajax({
						url: '/hw/inventory/saveDetList?ticketId=' + that.$store.state.token,
						data: JSON.stringify({
							mainId: that.detail.header.id,
							list: list
						}),
						contentType: 'application/json',
						dataType: 'json',
						method: 'POST',
						success: function(result) {
							loading.close();
							that.selectOrders = []
							that.$emit("success", result.data)
							that.$message.success("加入成功")
							that.pageTag()
						},
					})
				})
			},

			selectAll(arr) { // 是否全选
				if (arr.length !== 0) {
					// 全选
					arr.forEach(item => {
						const bool = this.selectOrders.some(user => user.tagId === item
							.tagId) // 存在返回true 否则返回false
						if (!bool) {
							// 不存在添加
							this.selectOrders.push(item)
						}
					})
				} else {
					// 取消全选
					that.tableData.list.forEach(item => {
						this.selectOrders = this.selectOrders.filter(user => user.tagId !== item.tagId)
					})
				}
			},

			handleSelectionChange(arr, row) { // 选择
				const bool = this.selectOrders.some(user => user.tagId === row.tagId) // 存在返回true 否则返回false
				if (bool) {
					// 存在删除
					this.selectOrders = this.selectOrders.filter(user => user.tagId !== row.tagId)
				} else {
					// 添加
					this.selectOrders.push(row)
				}
			},

			echo() {
				let rows = []
				that.tableData.list.forEach(row => {
					that.selectOrders.forEach(item => {
						if (row.tagId === item.tagId) {
							rows.push(row)
						}
					})
				})
				this.toggleSelection(rows)
			},

			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},

			saveDet(item) {
				if (item.realAmount <= 0) return that.$message.error("实际数量有误")

				this.$confirm('是否确认加入到出库单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const _this = this;
					that.ajax({
						url: '/hw/inventory/saveDet?ticketId=' + that.$store.state.token,
						data: JSON.stringify({
							mainId: that.detail.header.id,
							tagId: item.tagId,
							amount: item.realAmount
						}),
						contentType: 'application/json',
						dataType: 'json',
						method: 'POST',
						success: function(result) {
							that.$emit("success", result.data)
							that.$message.success("加入成功")
							that.pageTag()
						},
					})
				})
			},

			search() {
				that.tableData.pageIndex = 1
				that.pageTag()
			},

			changePage(value) {
				that.tableData.pageIndex = value
				that.pageTag()
			},

			pageTag() {
				that.loading = true
				let apiName = "standBook/pageCurrentTag"
				that.ajax({
					url: apiName + '?ticketId=' + that.$store.state.token + '&pageIndex=' + that.tableData
						.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.form),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						that.loading = false
						if (result.data) {
							for (let item of result.data.records) {
								item.realAmount = item.amount
							}
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
							that.$nextTick(function() {
								that.echo()
							})
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>